import React, { Component } from 'react'
import chmyaxios from "../../utils/chmyaxios"
import { SearchBar, WhiteSpace } from 'antd-mobile';
import "./Category.scss"
export default class Category extends Component {
  state = {
    cateList: [],//返回菜单的数据
    cateList_content_banner: [],//右侧菜单banner数据
    cateList_content_title: [],//右侧菜单title数据
    cateList_content_content1: [],
    cateList_content_content2: [],
    value: "",
    select_index: 0,//默认第一个有样式
  }
  constructor(props) {
    super(props)
    //列表的应用
    this.CateListRef = React.createRef()
  }
  //数据的内容
  getCateList = (res) => {
    let newarr = JSON.parse(JSON.stringify(this.state.cateList))
    newarr.push(res.data.content)
    // this.state.cateList.push(res.data.content.title)
    // let cateList = this.state.cateList
    this.setState({
      cateList: newarr
    }, function () {
      // console.log(this.state.cateList[1]).pile;
      this.setState({
        select_index: parseInt(0),
        // cateList_content_banner: this.state.cateList[0].banner,
        // cateList_content_title: this.state.cateList[0].mini_banner.content,
        // cateList_content_content1: this.state.cateList[0].pile[0].group,
      })
    })
  }
  //缓存到本地
  //设置分类菜单的数据
  //is_storage 代表是否之前已经缓存过  true 缓存了
  // setCategories = (res,is_storage)=>{
  //   //缓存的数据
  //   let categories_cache ={}
  //   if(is_storage){
  //     //直接获取数据
  //     console.log(localStorage.getItem("categories_cache"));
  //     categories_cache = JSON.parse(localStorage.getItem("categories_cache"))
  //   }else{
  //     categories_cache = {
  //       date:Date.now(),
  //       cateList:res
  //     }
  //   }
  //   //缓存到本地
  //   localStorage.setItem("categories_cache", JSON.stringify(categories_cache))
  //   let select_index = this.target.getAttribute("data-index")
  //   this.setState({ 
  //     categories: res,
  //     cateList_content_banner: this.state.cateList[select_index].banner,
  //     cateList_content_title: this.state.cateList[select_index].mini_banner.content,
  //     cateList_content_content: this.state.cateList[select_index].pile[0].group
  //   })
  // }
  componentDidMount() {

    // //进来判断是否被缓存了
    // let categories_cache= localStorage.getItem("categories_cache")
    // //如果本地不为空
    // if(categories_cache && JSON.parse(JSON.stringify(categories_cache)).date){
    //   //比较两个时间是否过期
    //   //获取现在时间
    //   let current_time = Date.now();
    //   //本地存储的时间 也就是我们本来存储的时间
    //   let storage_time = JSON.parse((JSON.stringify(categories_cache)).date)
    //   //比较两个时间
    //   if(current_time - storage_time > 60*60*1000){
    //     //本地存储过期  从新获取
    //     this.getCateList()
    //   }else{
    //     //没有过期
    //     //直接获取
    //     console.log(JSON.parse(JSON.stringify(categories_cache)));
    //     this.setCategories(JSON.parse(JSON.stringify(categories_cache)).cateList,true)
    //   }
    // }else{
    //   //没有缓存
    //   this.getCateList()
    // }

    //图书
    chmyaxios.get("get_content&title=%E5%9B%BE%E4%B9%A6&pageid=712231").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //童书
    chmyaxios.get("get_content&title=%E7%AB%A5%E4%B9%A6&pageid=712675").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //旧书
    chmyaxios.get("get_content&title=%E6%97%A7%E4%B9%A6%2F%E6%8B%8D%E5%8D%96&pageid=712652").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //女装
    chmyaxios.get("get_content&title=%E5%A5%B3%E8%A3%85&pageid=713046").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //童鞋
    chmyaxios.get("get_content&title=%E7%AB%A5%E8%A3%85%E7%AB%A5%E9%9E%8B&pageid=712821").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //手机数码
    chmyaxios.get("get_content&title=%E6%89%8B%E6%9C%BA%E6%95%B0%E7%A0%81&pageid=713343").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //创意文具
    chmyaxios.get("get_content&title=%E5%88%9B%E6%84%8F%E6%96%87%E5%85%B7&pageid=712655").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //男装
    chmyaxios.get("get_content&title=%E7%94%B7%E8%A3%85&pageid=713109").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //男女鞋
    chmyaxios.get("get_content&title=%E7%94%B7%E5%A5%B3%E9%9E%8B&pageid=713178").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //电子书
    chmyaxios.get("get_content&title=%E7%94%B5%E5%AD%90%E4%B9%A6&pageid=712239").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //电脑办公
    chmyaxios.get("get_content&title=%E7%94%B5%E8%84%91%E5%8A%9E%E5%85%AC&pageid=713359").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //母婴
    chmyaxios.get("get_content&title=%E6%AF%8D%E5%A9%B4%E7%8E%A9%E5%85%B7&pageid=712954").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //运动户外
    chmyaxios.get("get_content&title=%E8%BF%90%E5%8A%A8%E6%88%B7%E5%A4%96&pageid=713189").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //童鞋
    chmyaxios.get("get_content&title=%E9%A3%9F%E5%93%81%E7%94%9F%E9%B2%9C&pageid=713260").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //童鞋
    chmyaxios.get("get_content&title=%E7%BE%8E%E5%A6%86%E4%B8%AA%E6%8A%A4&pageid=713244").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //童鞋
    chmyaxios.get("get_content&title=%E7%BD%91%E7%BB%9C%E6%96%87%E5%AD%A6&pageid=712648").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //童鞋
    chmyaxios.get("get_content&title=%E5%86%85%E8%A1%A3%E9%85%8D%E9%A5%B0&pageid=713213").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //童鞋
    chmyaxios.get("get_content&title=%E7%AE%B1%E5%8C%85%E7%9A%AE%E5%85%B7&pageid=713209").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //童鞋

    chmyaxios.get("get_content&title=%E5%AE%B6%E7%94%A8%E7%94%B5%E5%99%A8&pageid=713362").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    chmyaxios.get("get_content&title=%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5&pageid=713340").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    chmyaxios.get("get_content&title=%E5%AE%B6%E5%B1%85%E5%AE%B6%E7%BA%BA&pageid=713319").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    chmyaxios.get("get_content&title=%E6%B1%BD%E8%BD%A6%E7%94%A8%E5%93%81&pageid=713464").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    chmyaxios.get("get_content&title=%E5%8E%A8%E6%88%BF%E7%94%A8%E5%93%81&pageid=713338").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    chmyaxios.get("get_content&title=%E5%90%AC%E4%B9%A6&pageid=712636").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    chmyaxios.get("get_content&title=%E5%AE%B6%E5%85%B7%E5%AE%B6%E8%A3%85&pageid=713463").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    chmyaxios.get("get_content&title=%E5%BD%93%E5%BD%93%E4%BC%98%E8%AF%BE&pageid=833948").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    chmyaxios.get("get_content&title=%E5%BD%93%E5%BD%93%E7%A4%BC%E5%93%81%E5%8D%A1&pageid=713467").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    chmyaxios.get("get_content&title=%E7%8F%A0%E5%AE%9D%E9%A5%B0%E5%93%81&pageid=713233").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    chmyaxios.get("get_content&title=%E7%8C%9C%E6%82%A8%E5%96%9C%E6%AC%A2&pageid=0").then(res => {
      this.getCateList(res)
    }).catch(err => {
      console.log(err);
    })
    //监听滚动事件
    // console.log(this.CateListRef.current);
    // this.CateListRef.current.addEventListener("scroll", this.handleScroll)


  }
  //左侧点击
  handleClick = (e) => {
    // console.log(this.CateListRef.current.scrollTop);
    let select_index = e.target.getAttribute("data-index")
    // this.CateListRef.current.style.top = -top1
    let top1 = (48 * select_index)
    this.CateListRef.current.style.top = -top1 + "px";
    // console.log(this.CateListRef.current.children[select_index]);
    // console.log(this.CateListRef.current[ select_index].style.top); 
    // this.CateListRef.current.children[select_index].style.top = "-50px"
    // console.log( this.CateListRef.current.children[select_index ].style.top);

    /* 点击获取当前的下标 */
    // console.log(e.target.getAttribute("data-index"));
    //点击改变data-index
    this.setState({
      select_index: parseInt(select_index),
      cateList_content_banner: this.state.cateList[select_index].banner,
      cateList_content_title: this.state.cateList[select_index].mini_banner.content,
      cateList_content_content1: this.state.cateList[select_index].pile[0].group,
    })
  }
  //右边图片点击
  handleProductItemClick = (goods_info) => {
    // let cid = e.target.getAttribute("data-index")
    // console.log(cid);
    // // console.log(this.props);
    // this.props.history.push("/goodDetail?cid=" + cid)
    this.props.history.push({
      pathname: "goodDetail",
      state: {
        goods_info
      }
    })
  }
  //点击后退箭头
  handleClick1 = (params) => {
    window.history.go(-1)
  }
  //取到搜索页面
  GoToSearchcenter = (props) => {
    this.props.history.push("/searchcenter")
  }
  //点击进去每个详情
  goTo = (e) => {
    let cid = e.target.getAttribute("data-index")
    console.log(cid);
    this.props.history.push("/cateList" + cid)
  }
  render() {
    return (
      <div className="dang-category">
        {/* 分类头部开始 */}
        <div className="dang-category-header">
          <div className="category-header-l" onClick={this.handleClick1}>
            <i className="iconfont icon-zuojiantou"></i>
          </div>
          <div className="category-header-m" onClick={this.GoToSearchcenter}>
            <SearchBar placeholder="搜索商品/店铺/种类" maxLength={8} />
            <WhiteSpace />
          </div>
          <div className="category-header-r">
            <i className="iconfont icon-sangedian"></i>
          </div>
          {/* 分类头部结束 */}
        </div>
        {/* 分类内容开始 */}
        <div className="dang-category-content">
          {/* 左边内容开始 */}
          <div className="category-content-left1" onClick={this.handleClick} >
            <div className="category-content-left" ref={this.CateListRef}>
              {
                this.state.cateList.map((v, index) => {
                  return (
                    //  data-index 是自定义的 用来处理当前点击的那个商品

                    <div data-index={index} className={this.state.select_index === index ? "active content-left-item" : "content-left-item"} key={v.title}>
                      {v.title}
                    </div>

                  )
                })
              }
            </div>
          </div>
          {/* 左边内容结束 */}
          {/* 右边内容开始 */}
          <div className="category-content-right">
            {/* 右边banner图开始 */}
            <div className="content-right_banner">
              {
                this.state.cateList_content_banner.map(v => {
                  // console.log(v);
                  return (
                    <img src={v.img} alt="" key={v.img} />
                  )

                })
              }
            </div>
            {/* 右边banner图结束 */}
            {/* 右边内容中间部分开始 */}
            <div className="content-right_title">
              {
                this.state.cateList_content_title && this.state.cateList_content_title.map((v, index) => {
                  // console.log(v);
                  return (
                    <div className="content_title_con" key={v.promo_title}>
                      <div className="title_con_left">
                        <p>{v.promo_title}</p>
                        <span>{v.promo_text}</span>
                      </div>
                      <div className="title_con_right">
                        <i data-index={v.promo_title} className="iconfont icon-youjiantou" onClick={this.goTo}></i>
                      </div>
                    </div>
                  )
                })
              }
            </div>
            {/* 右边内容中间部分结束 */}
            {/* 右邊細節介紹開始 */}
            <div className="content-right_content">
              {
                this.state.cateList_content_content1 && this.state.cateList_content_content1.map(v => {
                  // console.log(v);
                  return (
                    v.group_name === "推荐品牌" || v.group_name === "按内容分类" || v.group_name === "0-2岁" || v.group_name === "3-6岁" || v.group_name === "7-10岁" || v.group_name === "11-14岁" || v.group_name === "热门分类" || v.group_name === "电子书榜单" || v.group_name === "特色推荐" || v.group_name === "文艺" || v.group_name === "经管" || v.group_name === "人文社科" || v.group_name === "教育" || v.group_name === "励志" || v.group_name === "科技" || v.group_name === "生活" || v.group_name === "童书" || v.group_name === "小说" || v.group_name === "文学" || v.group_name === "青春文学" || v.group_name === "动漫/幽默" || v.group_name === "成功/励志" || v.group_name === "传记" || v.group_name === "艺术" || v.group_name === "中小学教辅" || v.group_name === "当当优客"
                      ? <div className="content_content_itemBox" key={v.group_name}>
                        <div className="content_content2_header">
                          <div className="content2_header_left">
                            <p className="header_left_item">
                              {v.group_name}
                            </p>
                            <i className="iconfont icon-youjiantou"></i>
                          </div>
                          <div className="content2_header_right">
                            <p className="header_right_item">
                              {v.more}
                            </p>
                            <i className="iconfont icon-youjiantou"></i>
                          </div>
                        </div>
                        <div className="content_itemBox_bottom">
                          {
                            v.detail.map(vv => {
                              // console.log(vv.title)
                              return (
                                <div className="itemBox_bottom_item" key={vv.title}>
                                  <div className="itemBox_bottom_border">
                                    {vv.title}
                                  </div>
                                </div>
                              )
                            })
                          }
                        </div>
                      </div> : <div className="content_content_title" key={v.group_name}>
                        {/* 右邊头开始 */}
                        <div className="title_con_tit">
                          <p className="title_con_tit1">{v.group_name}</p>
                        </div>
                        {/* 右邊头结束 */}
                        {/* 右边内容开始 */}
                        <div className="con_item_box"  >
                          {
                            v.detail.map((vv, index) => {
                              // console.log(vv);
                              return (
                                <div className="title_con_item" key={vv.title}>
                                  <div className="con_item_img" onClick={this.handleProductItemClick.bind(this, vv)} data-index={vv.title}>
                                    <img data-index={index} src={vv.icon} alt="" />
                                    <span>{vv.title}</span>
                                  </div>

                                </div>

                              )
                            })
                          }
                          {/* 右边内容结束 */}
                        </div>
                      </div>
                  )
                  // return (

                  // )
                })
              }
              {/* <div className="content_content_title1">
                {
                  this.state.cateList_content_content2 && this.state.cateList_content_content2.map(v => {
                    // console.log(v);
                    // return (

                    // )
                  })
                }
              </div> */}
            </div>

            {/* 右邊細節介紹结束 */}

          </div>

          {/* 右边内容结束 */}
        </div>
        {/* 分类内容结束 */}
      </div>
    )
  }
}
